<template>
    <div v-loading="loading" style="height: 90%;">
        <div class="on-data-Recond" v-if="!isData"><el-empty  description="没有找到对话记录" /></div>
        <el-scrollbar v-else  :class="isShow?'custom-scrollba':'modal-list'">
            <section  class="center-list" ref="scrollbarRef">
                <div v-for="(item, index) in TalkListArray" :key="index">
                    <div class="flex flex-col">
                        <div class="flex self-end p-2.5 m-1.5  max-box">
                            <div class="cont-box p-2.5 m-1.5 relative rounded-lg">
                                <div class="user-triangle absolute "></div>
                                {{ item.input_content }}
                                <div class="rounded-lg flex  justify-end items-center">
                                    <div class="text-xs">
                                        <i class="iconfont icon-shizhong text-xl align-sub" style="color: #ff9000"></i>{{ item.create_time }}
                                    </div>
                                </div>
                            </div>
                            <div class="w-11 h-11 ml-2 relative">
                                <div class="emote-box absolute"><img class="w-6 h-6" v-if="item.emotion" :src="getEmoteSrc(item.emotion)" alt=""></div>
                                <img src="/src/assets/images/user_rect.png" alt="" class="w-11 h-full rounded">
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <div class="flex self-start p-2.5  max-box">
                            <div class="w-11 h-11 mr-2.5">
                                <img src="/src/assets/images/robot_circle.png" alt="" class="w-11 h-full rounded">
                            </div>
                            <div class=" p-2.5 m-1.5 relative rounded-lg " :class="isShow?'ai-answer':'ai-center'">
                                <div class="ai-triangle absolute" :class="isShow?'ai-id':'ai-code'"></div>
                                <span> {{ item.output_content }}</span>
                                <div class="rounded-lg flex  justify-end items-center">
                                    <div class="text-xs">
                                        <i class="iconfont icon-shizhong text-xl align-sub" style="color: #ff9000"></i>{{ item.update_time }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </el-scrollbar>
    </div>
</template>

<script>
import historyTalk from '../api/historyTalk';
import { ref, watch } from 'vue';

export default {
    
    props: {
        session_id: {
            type: Number,
            required: true
        },
        session_code: {
            type: String,
            required: true
        },
        session_show: {
            type: Boolean,
            required: true
        },
        showmodal:{
            type: Boolean,
            required: true
        }
    },
    setup(props) {
        
        const loading = ref(false);
        const isData = ref(false);
        const isShow = ref(false);
        const TalkListArray = ref([])
        const filterData = ref({
            page: '1',
            page_size: '10000',
            session_id: props.session_id,
            session_code: props.session_code,
        });

        const fetchData = () => {
            const hasToken = localStorage.getItem('accessToken');
            loading.value = true;
            TalkListArray.value.splice(0,TalkListArray.value.length);
            historyTalk.getSessionInfo(hasToken, filterData.value).then(res => {
                if (res.data.list.length > 0) {
                    isData.value = true;
                    TalkListArray.value.push(...res.data.list);
                } else {
                    isData.value = false;
                }
            }).finally(() => {
                loading.value = false; // 加载完成
            });
        };
        

        watch(() => props.session_id, (newSessionId) => {
            filterData.value.session_id = newSessionId;
            fetchData();
        });
        watch(() => props.session_code, (newSessionId) => {
            filterData.value.session_code = newSessionId;
            fetchData();
        });
        // 监听器模态框事件 true 在调用 false关闭 不触发
        watch(() => props.showmodal, (newValue) => {
            // console.log(newValue,"newValue");
            if (newValue) {
                fetchData();
            }
        });
        watch(() => props.session_show, (newValue) => {
            isShow.value =  newValue
        },{immediate:true,deep:true})
        const getEmoteSrc =(emotion)=>{
            switch (emotion) {
                case '愤怒':
                    return '/images/img/emotion/emotion_anger_32.png';
                case '稍有不满':
                    return '/images/img/emotion/emotion_dissatisfy_32.png';
                case '辱骂':
                    return '/images/img/emotion/emotion_abuse_32.png';
                case '高兴':
                    return '/images/img/emotion/emotion_smile_32.png';
                case '不耐烦':
                    return '/images/img/emotion/emotion_impatient_32.png';
                case '一般':
                    return '/images/img/emotion/emotion_normal_32.png';
                default:
                    return '';
            }
        }
        // 初次加载数据
        fetchData();
        const currentSessionId = computed(() => props.session_id);

        return {
            loading,
            isData,
            currentSessionId,
            TalkListArray,
            getEmoteSrc,
            isShow
        };
    }
};

</script>

<style scoped>
.center-list {
    width: 100%;
    height: 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: scroll;
    /* padding-bottom: 30px; */
    scrollbar-width: none;
}
.max-box{
    max-width: 70%;
}
.ai-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    /* border-top: 10px solid #f2f2f2;*/
    top: 8px;
    left: -10px;
}
.ai-id{
    border-top: 10px solid var(--v-hist-ai-bg-color);
}
.ai-code{
    border-top: 10px solid var(--v-chat_box_shadow_1);
}
.ai-answer{
    background-color:var(--v-hist-ai-bg-color,#434346);
    color: var(--v-txt_icon_black_2, #1a2029);
}
.ai-center{
    background-color:var(--v-ai-custmer-bg-color,#434346);
    color: var(--v-txt_icon_black_2, #1a2029);
}
.cont-box{
    background-color: var(--v-user-bg-color);
    color: var(--v-txt_icon_black_2, #1a2029);
}
.hide{
    position: absolute;
    opacity: 0;
    padding: 16px 10px;
    font-size: 20px;
    left: 0;
    width: 100%;
    background-color: #F4E4C2;
    transform: translateY(-10%);
    transition: transform 0.5s ease;
    height: 20px;
}
.user-triangle {
    width: 0;
    height: 0;
    /* border-left: 10px solid rgba(0, 0, 0, 0); */
    border-right: 10px solid rgba(0, 0, 0, 0);
    /* border-top: 10px solid #C2D9F1; */
    border-top: 10px solid var(--v-user-bg-color);
    top: 8px;
    right: -10px;
}
.custom-scrollbar {
    height: 750px;
    max-height: 100vh;
    min-height: 300px; 
}
.modal-list{
    height: 520px;
    max-height: 100vh;
    min-height: 300px;
}
.on-data-Recond{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep(.el-empty){
    padding: 0;
}
.emote-box{
    right: -10px;
    top: -10px;
}
</style>